<template>
  <div>
    <el-dialog
      :title="poolTitle"
      :visible.sync="localVisible"
      width="75%"
    >
      <el-input v-model="tagPoolQuery.tagName" placeholder="标签名" style="width: 30%;" class="filter-item"
                @keyup.enter.native="handleSearch"
      />
      <el-button style="margin-left: 20px" v-waves class="filter-item" type="primary" icon="el-icon-search"
                 @click="handleSearch"
      >
        查询
      </el-button>
      <div style="margin-top: 10px;margin-bottom: 10px; display: inline;margin-left: 50px">

        <el-select style="width: 30%" v-model="searchableSelect.selectedTagId"
                   :remote-method="getRemoteTagList"
                   @focus="getRemoteTagList"
                   filterable default-first-option remote placeholder="请输入标签名称并按回车进行添加"
                   @keyup.enter.native="addToCategory"
        >
          <el-option v-for="(item,index) in searchableSelect.tagOptions" :key="item.id" :label="item.name"
                     :value="item.id"
          />
        </el-select>
        <el-button style="margin-left: 20px" v-waves class="filter-item" type="primary" icon="el-icon-search"
                   @click="addToCategory"
        >加入
        </el-button>
      </div>

      <!--外层dialog内容-->
      <el-table :data="tagList" v-loading="loading">
        <el-table-column property="id" label="ID"></el-table-column>
        <el-table-column property="name" label="标签"></el-table-column>
        <el-table-column property="creator" label="创建者"></el-table-column>
        <el-table-column property="createTime" label="创建时间"></el-table-column>
        <el-table-column property="categories" label="所属类别">
          <template slot-scope="scope">
            <span>{{ scope.row.categories.map(category => category.name).join(', ') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="warning" size="mini" @click="removeFromCategory(row)">
              移出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="tagPoolQuery.page"
                  :limit.sync="tagPoolQuery.limit"
                  @pagination="fetchTagList"
      />
      <span slot="footer" class="dialog-footer">
<!--        <el-button type="primary" @click="localVisible = false">确 定</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addToCategory,
  fetchTagList, findTags, removeTagFromCategory
} from '@/api/tag'

import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import input from 'element-ui/packages/input'
import waves from '@/directive/waves' // secondary package based on el-pagination

export default {
  name: 'TagPoolDialog',
  directives: { waves },
  computed: {
    input() {
      return input
    }
  },
  components: { Pagination },
  props: {
    categoryId: {
      type: Number,
      required: true
    },
    categoryName: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      localVisible: false,
      tagList: [],
      total: 0,
      inputTag: '',
      currentJudgeList: [],
      poolTitle: '',
      tagPoolQuery: {
        limit: 5,
        page: 1,
        categoryId: null,
        categoryName: null,
        tagName: null,
      },
      searchableSelect: {
        selectedTagId: null,
        tagOptions: null
      }
    }
  },
  created() {

  },
  watch: {
    visible: function(newVal) {
      if (newVal) {
        this.tagPoolQuery.categoryId = this.categoryId
        this.localVisible = true
      }
    },
    localVisible: function(newVal) {
      if (!newVal) {
        this.handleClose()
        this.$emit('tagPoolDialogClose')
      }
    },
    categoryId: function(newVal) {
      this.tagList = []
      this.total = 0
      this.tagPoolQuery.categoryId = newVal
      console.log('categoryId:', newVal)
      this.fetchTagList()
    },
    categoryName: function(newVal) {
      this.poolTitle = '《' + newVal + '》' + '标签池'
    }
  },

  methods: {
    handleClose() {
      this.tagList = []
      this.total = 0
      this.tagPoolQuery = {
        limit: 5,
        page: 1,
        categoryId: null,
        categoryName: null,
        tagName: null
      }
    },
    fetchTagList() {
      this.loading = true
      fetchTagList(this.tagPoolQuery).then(response => {
        this.tagList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    removeFromCategory(row) {
      removeTagFromCategory(row.id, this.categoryId).then(response => {
        this.fetchTagList()
      })
    },
    addToCategory() {
      addToCategory(this.searchableSelect.selectedTagId, this.categoryId).then(response => {
        this.fetchTagList()
      })
    },
    getRemoteTagList(inputTagName) {
      if (!(inputTagName instanceof String)) {
        inputTagName = ''
      }
      findTags(inputTagName).then(response => {
        this.searchableSelect.tagOptions = response.data
      })
    },

    handleSearch() {
      this.fetchTagList()
    }

  }
}
</script>
